<template>
  <div class="app-container">
    <!-- 筛选 -->
    <div class="common-top">
      <div class="top-left">
        <el-input
          v-model="query.categoryName"
          placeholder="请输入分类名称"
          clearable
        ></el-input>
      </div>

      <div class="top-right">
        <el-button
          @click="handleSearch"
          icon="el-icon-search"
          type="primary"
          :loading="queryLoading"
          >查询</el-button
        >
      </div>
    </div>
    <!-- 表格 -->
    <div class="common-table-wrapper">
      <el-button
        type="success"
        icon="el-icon-plus"
        style="margin-bottom: 20px"
        @click="handleAdd"
        >添加分类</el-button
      >
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.children" border>
              <el-table-column
                prop="categoryName"
                label="子类名称"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="lastModifyTime"
                label="最后修改时间"
                align="center"
              >
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-edit"
                    size="mini"
                    @click="handleEditChildren(scope.row)"
                    >编辑子类</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row, 1)"
                    >删除子类</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column type="index" width="70" label="#" align="center">
        </el-table-column>
        <el-table-column
          prop="_id"
          label="UID"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="categoryName" label="分类名称" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column
          prop="lastModifyTime"
          label="最后修改时间"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="creator" label="创建人" align="center">
          <template slot-scope="scope"> 占位 </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-plus"
              size="mini"
              @click="handleAddChildren(scope.row)"
              type="primary"
              >添加子类</el-button
            >
            <el-button
              icon="el-icon-edit"
              size="mini"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.row, 0)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="query.currentPage"
          :page-size="query.recordPerPage"
          layout="total, prev, pager, next"
          :total="query.totalRecords"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 根节点 添加/编辑 弹出框 -->
    <el-dialog
      :title="isAdd === true ? '添加分类' : '编辑分类'"
      :visible.sync="dialogVisible"
      @close="resetForm('form')"
      width="40%"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="分类名称" label-width="80px" prop="categoryName">
          <el-input
            v-model="form.categoryName"
            autocomplete="off"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="isAdd === true ? saveAdd() : saveEdit()"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 添加子节点 -->
    <el-dialog
      title="添加子类"
      :visible.sync="childrenAddVisible"
      @close="resetForm('child_add')"
      width="40%"
    >
      <el-form :model="form" :rules="rules_child_add" ref="child_add">
        <el-form-item label="子类名称" label-width="80px" prop="categoryName">
          <el-input
            v-model="form.categoryName"
            autocomplete="off"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="childrenAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAddChildren">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑子节点 -->
    <el-dialog
      title="编辑子类"
      :visible.sync="childrenEditVisible"
      @close="resetForm('child_edit')"
      width="40%"
    >
      <el-form :model="form" :rules="rules_child_edit" ref="child_edit">
        <el-form-item label="子类名称" label-width="80px" prop="categoryName">
          <el-input
            v-model="form.categoryName"
            autocomplete="off"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="childrenEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEditChildren">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.getData();
  },
  data() {
    return {
      rules: {
        categoryName: {
          required: true,
          message: "请输入分类名称",
          trigger: "blur",
        },
      },
      rules_child_add: {
        categoryName: {
          required: true,
          message: "请输入分类名称",
          trigger: "blur",
        },
      },
      rules_child_edit: {
        categoryName: {
          required: true,
          message: "请输入分类名称",
          trigger: "blur",
        },
      },
      query: {
        currentPage: 1,
        recordPerPage: 10,
        categoryName: "",
        totalRecords: 0,
      },
      form: {},
      queryLoading: false,
      tableData: [],
      isAdd: false,
      dialogVisible: false,
      childrenAddVisible: false,
      childrenEditVisible: false,
    };
  },

  methods: {
    getData() {
      return new Promise((resolve, reject) => {
        this.queryLoading = true;
        this.$api.post("/admin/api/categories_list", this.query).then((res) => {
          // this.$message.success("获取列表成功！");
          this.queryLoading = false;
          console.log(res);
          this.tableData = res.list;
          this.query.totalRecords = res.total;
          resolve();
        });
      });
    },
    handleAdd() {
      this.isAdd = true;
      this.dialogVisible = true;
      this.form = {
        type: 0,
        categoryName: "",
      };
    },

    saveAdd() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$api.post("admin/api/categories_save", this.form).then((r) => {
            this.$message.info(r);
            this.getData();
            this.dialogVisible = false;
          });
        } else {
          this.$message.error("请完整填写表单！");
        }
      });
    },

    handleAddChildren(row) {
      this.childrenAddVisible = true;
      this.form = {
        type: 1,
        parentId: row._id,
        categoryName: "",
      };
    },

    saveAddChildren() {
      this.$refs.child_add.validate((valid) => {
        if (valid) {
          this.$api.post("admin/api/categories_save", this.form).then((r) => {
            this.$message.info(r);
            this.getData();
            this.childrenAddVisible = false;
          });
        } else {
          this.$message.error("请完整填写表单！");
        }
      });
    },

    handleEdit(row) {
      this.isAdd = false;
      this.dialogVisible = true;
      this.form = {
        id: row._id,
        type: 0,
        categoryName: row.categoryName,
      };
    },

    saveEdit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$api.post("admin/api/categories_edit", this.form).then((r) => {
            this.$message.info(r);
            this.getData();
            this.dialogVisible = false;
          });
        } else {
          this.$message.error("请完整填写表单！");
        }
      });
    },

    handleEditChildren(row) {
      this.childrenEditVisible = true;
      this.form = {
        id: row._id,
        parentId: row.parentId,
        type: 1,
        categoryName: row.categoryName,
      };
    },

    saveEditChildren() {
      this.$refs.child_edit.validate((valid) => {
        if (valid) {
          this.$api.post("admin/api/categories_edit", this.form).then((r) => {
            this.$message.info(r);
            this.getData();
            this.childrenEditVisible = false;
          });
        } else {
          this.$message.error("请完整填写表单！");
        }
      });
    },

    handleDelete(row, type) {
      this.$confirm("确认删除吗？", "提示", { type: "warning" }).then(() => {
        let param;
        type === 1
          ? (param = { id: row._id, type, parentId: row.parentId })
          : (param = { id: row._id, type });

        this.$api.post("admin/api/categories_delete", param).then((res) => {
          this.$message.info(res);
          this.getData();
        });
      });
    },

    handleSearch() {
      this.query.currentPage = 1;
      this.getData().then(() => {
        this.$message.success("获取数据成功");
      });
    },

    handleCurrentChange(e) {
      this.query.currentPage = e;
      this.getData();
    },
    resetForm(form) {
      this.$refs[form].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
$vw_base: 1920;

@function vw($p) {
  @return ($p/$vw_base) * 100vw;
}

.pagination {
  margin-top: vw(20);
}
</style>